<template>
    <view class="page">
        <!-- <back></back> -->
        <view class="item it_flex">
            <view class="it_left">姓名</view>
            <input type="text" placeholder="请输入姓名" v-model="username" />
        </view>
        <view class="item it_flex">
            <view class="it_left">手机号</view>
            <input type="number" maxlength="11" placeholder="请输入手机号" v-model="mobile" />
        </view>
        <!-- <picker range-key="name" :range="cardlist" @change="changeCard">
			<view class="item it_flex">
				<view class="it_left">提现类型</view>
				<view class="">{{cardname?cardname:'请选择提现类型'}}</view>
			</view>
		</picker> -->
        <picker range-key="name" :range="list" @change="changeBank">
            <view class="item it_flex">
                <view class="it_left">提现类型</view>
                <view class="">{{ bankName ? bankName : "请选择提现类型" }}</view>
            </view>
        </picker>
        <view class="item it_flex">
            <view class="it_left">账户/账号</view>
            <input type="number" placeholder="请输入账户/账号" v-model="cardCode" />
        </view>
        <!-- <view class="item it_flex" v-if="cardindex==2">
			<view class="it_left">支付宝</view>
			<input type="text" placeholder="请输入支付宝" v-model="cardCode" />
		</view> -->
        <!-- <picker range-key="name" :range="list" @change="changeBank" v-if="cardindex==0">
			<view class="item it_flex">
				<view class="it_left">银行卡</view>
				<view class="">{{bankName?bankName:'请选择银行卡'}}</view>
			</view>
		</picker> -->
        <view class="add btn u-flex-center" @click="getSubmit()">确认修改</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            id: "",
            username: "",
            mobile: "",
            bankCode: "",
            bankName: "",
            cardCode: "",
            cardlist: [
                {
                    name: "账户",
                },
                {
                    name: "微信号",
                },
                {
                    name: "支付宝",
                },
            ],
            cardindex: "",
            cardname: "",
        };
    },
    onLoad(options) {
        this.id = options.id;
    },
    onReady() {
        this.$u.post("/api/shop/get_brank_code", {}).then((res) => {
            if (res.code == 1) {
                this.list = res.data;
            }
        });
        if (this.id) {
            this.$u
                .post("/api/shop/get_shop_account_detail", {
                    ids: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        // this.list = res.data
                        this.username = res.data.username;
                        this.mobile = res.data.mobile;
                        this.bankCode = res.data.bankCode;
                        this.bankName = res.data.bankName;
                        this.cardCode = res.data.cardCode;
                    }
                });
        }
    },
    methods: {
        changeBank(e) {
            this.bankName = this.list[e.detail.value].name;
            this.bankCode = this.list[e.detail.value].code;
        },
        changeCard(e) {
            this.cardname = this.cardlist[e.detail.value].name;
            this.cardindex = e.detail.value;
        },
        getSubmit() {
            this.$u
                .post("/api/shop/edit_shop_account", {
                    username: this.username,
                    mobile: this.mobile,
                    bankCode: this.bankCode,
                    bankName: this.bankName,
                    cardCode: this.cardCode,
                    account_id: this.id ? this.id : "",
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showModal({
                            title: "修改成功",
                            showCancel: false,
                            success() {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            },
                        });
                    } else {
                        uni.showModal({
                            title: res.msg,
                            showCancel: false,
                        });
                    }
                });
        },
    },
};
</script>

<style>
page {
    padding: 33rpx;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
input {
    width: 70%;
}
.top {
    padding: 30rpx 0;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .radius {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        border: 1rpx solid #888;
    }

    .rad_css {
        background: #606dce;
        border: 1rpx solid #606dce;
    }

    .grey {
        color: #333;
        font-size: 28rpx;
    }
}

.haedimg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.it_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item_pad_bot {
    padding-bottom: 10rpx !important;
}

.item {
    padding: 32rpx 30rpx;
    background: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .it_left {
        font-weight: bold;
        color: #222;
    }

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .it_right {
        display: flex;
        align-items: center;

        text {
            color: #222;
        }

        .it_lef_img {
            width: 10rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }

        .it_rig_img {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
        }
    }

    .it_right_duo {
        border-bottom: 1rpx solid #dfdfdf;

        &:last-child {
            border: none;
        }
    }

    .it_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .it_grey {
            font-size: 28rpx;
            color: #888;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
        }

        input {
            font-size: 28rpx;
            font-weight: bold;
            text-align: left;
        }
    }

    .it_specs {
        color: #222;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        padding: 10rpx 24rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
        margin-bottom: 20rpx;

        .it_sp_line {
            width: 2rpx;
            height: 24rpx;
            margin: 0 20rpx 0 24rpx;
        }

        .it_sp_cha {
            width: 20rpx;
            height: 20rpx;
        }

        .it_sp_plus {
            width: 20rpx;
            height: 20rpx;
            margin-right: 20rpx;
        }

        .it_sp_gre {
            color: #606dce;
        }
    }

    .it_specs input {
        flex: 1;
        max-width: 60rpx;
    }

    .it_pri {
        font-size: 24rpx;
        color: #222;
        padding: 10rpx 48rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
    }

    .it_ban {
        width: 50%;
        padding: 30rpx 0;

        input {
            flex: 1;
            text-align: left;
            margin-left: 20rpx;
        }
    }
}

.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
}

.btn {
    width: 630rpx;
    height: 80rpx;
    margin-top: 157rpx;
}
</style>
